<template>
  <div ref="self" class="modal">
    <div class="confirm">
      <div class="title">提示</div>
      <div class="content">{{ msg }}</div>
      <div class="btn-group">
        <div v-if="[0, 1].includes(type)" class="button-confirm" @click="handleConfirm"> 确定 </div>
        <div v-if="[0].includes(type)" class="button-cancel" @click="handleCancel"> 取消 </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { defineComponent, ref } from "vue";

  export default defineComponent({
    name: "EwgConfirm",
    props: {
      msg: {
        type: String,
        default: "",
      },
      res: {
        type: Function,
        default: () => true,
      },
      rej: {
        type: Function,
        default: () => false,
      },
      type: {
        type: Number,
        default: 0,
      },
    },
    setup(props) {
      const self = ref();
      const handleDestory = () => {
        document.body.removeChild(self.value.parentNode);
      };
      const handleConfirm = () => {
        handleDestory();
        props.res(true);
      };
      const handleCancel = () => {
        handleDestory();
        props.res(false);
      };
      return {
        handleConfirm,
        handleCancel,
        handleDestory,
        self,
      };
    },
  });
</script>
<style lang="scss" scoped>
  .confirm {
    width: 400px;
    min-height: 200px;
    background: $--color-black-half-quarter;
    border-radius: $--border-radius;
    border: 5px solid $--color-white;
    color: $--color-white;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .title {
      font-size: 20px;
      margin-bottom: 20px;
    }
    .content {
      flex: 1;
    }
    .btn-group {
      align-self: flex-end;
      height: 30px;
    }
  }
</style>
